<template>
   <div class="home" @scroll="onScrollChange" ref="home">
      <div class="home-content">
        <navigation-bar :isShowBack = false :navBarStyle = 'navBarStyle'>
          <template v-slot:nav-left>
            <img :src="navBarCurrentSlotStyle.leftIcon" alt="">
          </template>
          <template v-slot:nav-center>
            <search :bgColor = "navBarCurrentSlotStyle.search.bgColor"
            :hintColor="navBarCurrentSlotStyle.search.hintColor"
            :icon="navBarCurrentSlotStyle.search.icon">
            </search>
          </template>
          <template v-slot:nav-right>
            <img :src="navBarCurrentSlotStyle.rightIcon" alt="">
          </template>
        </navigation-bar>
        <!-- <my-swiper :swiperImgs = "swiperData.map(item => item.icon)" :height = "swiperHeight" ></my-swiper> -->
        <my-swiper :swiperImgs = "swiperData" :height = "swiperHeight" ></my-swiper>
        <!-- //520活动 -->
        <activity>
          <div class="activity-520">
            <img src="@imgs/nianhuo.png">
          </div>
        </activity>

        <mode-options></mode-options>
        <!-- 秒杀模块 -->
        <seconds :dataSource = "secondsData"></seconds>
        <!-- 猜你喜欢 -->
        <activity>
          <div class="activity-520">
            <img src="@imgs/like.webp">
          </div>
        </activity>
        <goods :layoutType = "'3'" :isScroll="false"></goods>
      </div>
   </div>
</template>

<script>
import MySwiper from '@c/swiper/MySwiper'
import Activity from '@c/currency/Activity'
import ModeOptions from '@c/currency/ModeOptions'
import Seconds from '@c/seconds/Seconds.vue'
import Goods from '@c/goods/Goods.vue'
import NavigationBar from '@c/currency/NavigationBar'
import Search from '@c/currency/Search'
export default {
  name: 'home',
  data () {
    return {
      swiperData: [
        require('@imgs/swiper-1.jpg'),
        require('@imgs/swiper-2.jpg'),
        require('@imgs/swiper-3.jpg')
      ],
      swiperHeight: '184' + 'px',
      activitysData: [],
      secondsData: [],
      // navBar 插槽的样式数据,包含页面未开始滑动的时候插槽的样式  (默认样式)
      // 和 页面滑动到锚定点之后的插槽的样式
      navBarSlotStyle: {
        // 默认样式
        normal: {
          leftIcon: require('@imgs/more-white.svg'),
          search: {
            bgColor: '#ffffff',
            hintColor: '#999999',
            icon: require('@imgs/search.svg')
          },
          rightIcon: require('@imgs/message-white.svg')
        },
        // 高亮样式
        highlight: {
          leftIcon: require('@imgs/more.svg'),
          search: {
            bgColor: '#d7d7d7',
            hintColor: '#ffffff',
            icon: require('@imgs/search-white.svg')
          },
          rightIcon: require('@imgs/message.svg')
        }
      },
      // navBar 当前使用的插槽样式
      navBarCurrentSlotStyle: {},
      // navBar 的定制样式
      navBarStyle: {
        position: 'fixed',
        backgroundColor: ''
      },
      // 记录页面滚动值
      scrollTopValue: -1,
      // 锚点值
      ANCHOR_SCROLL_TOP: 160
    }
  },
  components: {
    MySwiper,
    Activity,
    ModeOptions,
    Seconds,
    Goods,
    NavigationBar,
    Search
  },
  created: function () {
    this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
    this.initData()
  },
  /**
   * keepalive 组件被激活的时候调用
   * 去为滑动模块指定滑动距离
   */
  activated () {
    this.$refs.home.scrollTop = this.scrollTopValue
  },
  methods: {
    // 获取数据
    initData: function () {
      // this.$http.get('/swiper')
      //   .then(data => {
      //     this.swiperData = data.list
      //   }).catch(err => {
      //     console.log(err)
      //   })
      // this.$http.get('/activitys')
      //   .then(data => {
      //     this.activitysData = data.list
      //   }).catch(err => {
      //     console.log(err)
      //   })
      this.$http.all([
        this.$http.get('/swiper'),
        this.$http.get('/activitys'),
        this.$http.get('/seconds')
      ]).then(this.$http.spread((swiperData, activitysData, secondsData) => {
        // this.swiperData = swiperData.list
        this.activitysData = activitysData.list
        this.secondsData = secondsData.list
      }))
    },
    /**
     * 监听页面滚动
     * 1、获取到当前页面滚动的距离
     * 2、计算 navBar 背景颜色 （navBar 背景透明度）
     *    当前滚动的距离 / 锚点值 = navBar 背景透明度 opacity
     * 3、opacity >= 1, 当前滚动的距离已经等于或者超过了锚点值，
     *    当前 navBar 插槽的样式变为高亮状态的样式
     *    否则的话 opacity < 1,当前 navBar 的样式,为默认状态的样式
     */
    onScrollChange ($event) {
      // 获取到当前页面滚动的距离
      this.scrollTopValue = $event.target.scrollTop
      // 计算 navBar 背景颜色 （navBar 背景透明度）
      let opacity = this.scrollTopValue / this.ANCHOR_SCROLL_TOP
      // 指定 narBar 插槽样式
      if (opacity >= 1) {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.highlight
      } else {
        this.navBarCurrentSlotStyle = this.navBarSlotStyle.normal
      }
      // 根据透明比例来设置 navBar 的背景颜色
      this.navBarStyle.backgroundColor = 'rgba(255,255,255,' + opacity + ')'
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@css/style.scss';
  .home {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-y: auto;
    &-content {
      height: 100%;
      .activity-520 {
        margin-top: px2rem(5);
        border-top-left-radius: px2rem(8);
        border-top-right-radius: px2rem(8);

        img {
          display: inline-block;
          width: 100%;
        }
      }
    }
  }
</style>
